<template>
	<view class="focus">
		<!-- <view>/ -->
		
			<view class="focusLogo">
				<view style="margin-top: -43px;margin-left: 30px;">
					<text style="font-size: 17px;color: #fff;font-weight: 600;">Ta的主页</text>
				</view>
				<image class="focusLog_img" @click="back()"  mode=""></image>
				<view  class="u-m-t-20 repair-box u-p-30 u-p-l-40 u-p-r-30">
					<view style="display: flex;">
						<view  class="list-img">
							<image  style="width: 100%;height: 100%;border-radius: 50%;" v-if="userObj.user_head_portrait" :src="userObj.user_head_portrait"></image>
							<image style="width: 100%;height: 100%;border-radius: 50%;" v-else src="https://clhy-img.oss-cn-beijing.aliyuncs.com/logo/avatar.jpg" ></image>
						</view>
						<!-- <image src="../../static/image/guoguo.jpg" class="list-img"></image> -->
						<view style="margin-left: 20rpx;">
							<view class="named">
								<view style="color: #FFFFFF;">{{userObj.user_nickname }}</view>
								<view style="align-items: center;margin-left: 7px;">
									<view class="follow"@click="fllowBtn">
										<!-- <image src="../../static/image/jiahao1.png" style="width: 10px;height: 10px;" mode=""></image> -->
										<!-- {{userObj.relational_markers == 1 ?'已关注':'取消关注'}} -->
										已关注
									</view>
								</view>
							</view>
							<view class="title">ID:{{userObj.people_concerned_id}}</view>
						</view>
					</view>
				</view>
			</view>
			<view v-if="!this.clapListData.length > 0" style="width: 100%;">
				<view style="width: 43%;margin: 20px auto;color: #999;">此用户没有发表任何数据</view>
			</view>
			<view v-for="(item,index) in clapListData">
				<!-- <view v-if="this.clapListData.length > 0">
					<view>此用户没有发表任何数据</view>
				</view> -->
				<view style="border-top: 1px solid #F7F8F9;background-color: #FFFFFF;margin-top: 10px;">
					<view class="u-m-t-20 repair-box u-p-30 u-p-l-30 u-p-r-30">
						<view >
							<view style="display: flex;">
								<view  class="list-img"  @click="navTo('/pages/clap/homepageClap')">
									<image v-if="item.user_front_head_portrait" :src="item.user_front_head_portrait" style="width: 100%;height: 100%;border-radius: 50%;"></image>
									<image style="width: 100%;height: 100%;border-radius: 50%;" v-else src="https://clhy-img.oss-cn-beijing.aliyuncs.com/logo/avatar.jpg" ></image>
								</view>
								
								<view style="margin-left: 20rpx;">
									<view class="named">
										<view style="display: flex;">{{item.building_location}}
										<view v-if="item.publisher_role == 1">（业主）</view>
										<view v-if="item.publisher_role == 2">（家属）</view>
										<view v-if="item.publisher_role == 3">（租客）</view>
										<view v-if="item.publisher_role == 4">（物业）</view>
										</view>
										
									</view>
									<view class="title">{{item.begin_time}}</view>
								</view>
							</view>
						</view>
						<view style="margin-top: 20px;height: 40px;background: rgb(221 221 221 / 22%);;padding: 10px;">
							<view>
								<view v-if="item.type_classification == 1" style="border: 1px solid #EBF9FF;background: #EBF9FF;color: #11A9EC;border-radius: 5px;padding: 3px 10px;">
									<image style="width: 13px;height: 13px;margin-right: 4px;" src="../../static/image/report.png" mode=""></image>报事</view>
								<view v-if="item.type_classification == 2" style="border: 1px solid #FFF5E7;background: #FFF5E7;color: #F9A832;border-radius: 5px;padding: 3px 10px;">
									<image style="width: 13px;height: 13px;margin-right: 4px;" src="../../static/image/eport.png" mode=""></image>报修</view>
								<view v-if="item.type_classification == 3" style="border: 1px solid #FFF1F3;background: #FFF1F3;color: #F15D73;border-radius: 5px;padding: 3px 10px;">
									<image style="width: 13px;height: 13px;margin-right: 4px;" src="../../static/image/mood.png" mode=""></image>心情</view>
							</view>
							<view style="float: right;margin-top: -20px;">
								<view style="color: #666666;">位置：{{item.building_number}}</view>
								<view style="float: right;">
									<image style="width: 14px;height: 18px;margin-left: 10px;" src="../../static/image/address.png" alt="">
								</view>
								
							</view>
						</view>
						<!-- <view style="margin-top: 10px;display: flex;">
							<span>定位：{{item.positioning_position}}</span>
							<image style="width: 18px;height: 18px;margin-left: 10px;" src="../../static/image/location.png" alt="">
						</view> -->
						<view style="margin-top: 10px;">
							<h4>{{item.photo_remarks}}</h4>
						</view>
						<view style="margin-top: 10px;display: flex;justify-content: space-between;padding: 10px;">
							<view style="width: 110px;height: 100px;">
								<image @click="" style="width: 100%;height: 100%;" @click="preview(item.first_photo)" :src="item.first_photo"  mode=""></image>
							</view>
							<view style="width: 110px;height: 100px;">
								<image style="width: 100%;height: 100%;"  @click="preview(item.second_photo)" :src="item.second_photo"  mode=""></image>
							</view>
							<view style="width: 110px;height: 100px;">
								<image style="width: 100%;height: 100%;"  @click="preview(item.the_third_photo)" :src="item.the_third_photo"  mode=""></image>
							</view>
						</view>
				
						<view class="complete" style="height: 54px;background: rgb(221 221 221 / 22%);padding: 10px;">
							<view class="complete_chu" style="display: flex;justify-content: space-between;padding: 2px 8px;">
								<view >
									<image class="complete_chuImg" src="../../static/image/time.png" mode="" mode=""></image>
								</view>
								
								<view class="complete_chuTxt" v-if="item.problem_status == 1">待处理</view>
								<view class="complete_chuTxt" v-if="item.problem_status == 2">处理中</view>
								<view class="complete_chuTxt" v-if="item.problem_status == 3">部分完成</view>
								<view class="complete_chuTxt" v-if="item.problem_status == 4" >已完成</view>
								<view class="complete_chuTxt" v-if="item.problem_status == 5">发布人删除</view>
								<view class="complete_chuTxt" v-if="item.problem_status == 6">已删除</view>
							</view>
							<view style="margin-top: 8px;margin-left: 50px;width: 60%;">
								<view style="display: flex;justify-content: space-between;">
									<view style="display: flex;" @click="fllowClick">
										<image style="width: 25px;height: 25px;" src="../../static/image/comment.png" mode=""></image>
										<view style="margin-left: 8px;">{{item.comment_count}}</view>
									</view>
									<view style="display: flex;" @click="listBtn(item)">
										<image v-if="item.sfClick == false" style="width: 25px;height: 25px;" src="../../static/image/givethe.png" mode=""></image>
										<image  v-if="item.sfClick == true" style="width: 25px;height: 25px;" src="../../static/image/giewa.png" mode=""></image>
										<view style="margin-left: 8px;">{{item.click_fabulous_count}}
											
										</view>
									</view>
									<view>
										<image style="width: 19px;height: 18px;" src="../../static/image/delete (2).png" mode=""></image>
									</view>
								</view>
							</view>
							
						</view>
						<view class="search-box-l u-m-t-30 u-flex"  v-show="fllowFlag = false">
							<view class="u-flex-1 u-m-r-10 " >
								<u-input v-model="comment_content" style='text-indent: 30rpx;border: 1px solid #447A05;border-radius: 30px;height: 36px;'   />
							</view>
							<view class="search-btn">
								<u-button shape='circle' style="height: 33px;" @click="sendOut">发送</u-button>
							</view>
						</view>
					</view>
				</view>
		</view>
	</view>
</template>

<script>
	// import Tabs from '@/components/tabs';
	// import mixins from '@/utils/navigate';
	// import apis from '@/apis/index';
	export default {
		data() {
			return {
				fllowFlag:false,
				indexList:true,
				confirmDeal:[],
				// tableData:{}
				 // con:"+关注",
				 flag:false,//单位切换开关 
				 clapListData:[],
				 pageIndex:1,
				 //评论参数
				  comment_content:null,//评论内容
				  userObj:{},
			};
		},
		// onLoad(options) {
		// 	this.people_concerned_id = options.people_concerned_id
		// 	console.log(this.people_concerned_id)
		// },
		onLoad(options) {
			const item = JSON.parse(decodeURIComponent(options.item));
			this.userObj = item
			console.log(this.userObj)
		},
		onShow() {
			this.homelist = uni.getStorageSync('hourseList')[uni.getStorageSync('hourseNum') || 0]
			this.getclapList()
		},
		methods:{
			//关注
			fllowBtn(item){
				this.$request.api.followList({
					focus_on_people_id:this.homelist.ownerUserId,//关注人id
					people_concerned_id:this.userObj.people_concerned_id,//被关注人id
				}).then(res =>{
					
				})
			},
			//添加评论
			// sendOut(item){
			// 	this.$request.api.commentData({
			// 		// answer_id:,//被评论id
			// 		photograph_id:item.id,//随手拍id
			// 		user_id:this.homelist.ownerUserId,//评论人id
			// 		passivity_user_id:item.user_id,//被评论人id
			// 		comment_content:null,//评论内容
			// 	}).then(.)
			// },
			fllowClick(){
				console.log('111')
				this.fllowFlag = true
			},
			//随手拍全部列表查询
			async getclapList(){
				let res = this.$request.api.clapList({
					pageIndex:this.pageIndex,
					user_id:this.userObj.people_concerned_id
				}).then(res => {
					this.clapListData = res.data.data.datalist
				})
			},
			//点赞
			listBtn(item){
				item.click_fabulous_count=item.click_fabulous_count+1
				this.$request.api.givethumbs({
					user_id:this.homelist.ownerUserId,
					type:1,//点赞状态:1、随手拍，2、评论
					id:item.id,//随手拍或评论id
				}).then(res => {
					
				})
				this.getclapList()
			},
			// 图片预览
			preview(item) {
				uni.previewImage({
					urls: [item],
					current: 0,
					longPressActions: {
						success: function(data) {
							console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
						},
						fail: function(err) {
							console.log(err.errMsg);
						}
					}
				});
			},
			//跳转页面
			navTo(url) {
			   uni.navigateTo({
			    url: url
			   })
			  },
			  
			shouList(){
				this.indexList =! this.indexList
			},
			
		}
	}
</script>

<style lang="scss">
	.focus{
		.focusLogo{
			width: 100%;
			height: 500rpx;
			padding-top: 118px;
			// background-color: #F9A832;
			top: 0;
			// z-index: -1;
			background-image: url('../../static/image/background.png');
			position: relative;
			.focusLog_img{
				position: absolute;
				top: 150rpx;
				left:33rpx;
				width: 25rpx;
				height:25rpx;
				color: #fff;
			}
			.LogoBox{
				display: flex;
				padding: 0 20rpx;
				.timeImg{
					width:120rpx;
					height: 120rpx;
					.timeImg_img{
						width:100%;
						height:100%;
						border-radius: 50%;
					}
				}
				.timeTxt{
					width: 60%;
					margin-left:20rpx;
					.timeTxtT{
						display: block;
						font-size: 42rpx;
						padding-top: 20rpx;
						font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
						color: #fff;
					}
					.timeTxtB{
						display: inline-block;
						color: #fff;
						font-size: 30rpx;
						letter-spacing: 5rpx;
						margin-top: 15rpx;
					}
				}
				.concernG{
					width: 20%;
					height: 60rpx;
					background-color: #fff;
					color: #007AFF;
					text-align: center;
					border-radius: 40rpx;
					float: left;
					font-size: 30rpx;
					line-height: 60rpx;
					margin-top: 30rpx;
					letter-spacing: 3rpx;
					.concernGImg{
						width: 20rpx;
						height: 20rpx;
					}
				}
			}
		}
		.pendingMain{
			position: absolute;
			top: 400rpx;
			left: 0;
			padding:0 20rpx;
			background-color: #fff;
			border-top-left-radius: 30rpx;
			border-top-right-radius: 30rpx;
			.time{
				margin-top: 40rpx;
				display: flex;
				.timeImg{
					width:120rpx;
					height: 120rpx;
					.timeImg_img{
						width:100%;
						height:100%;
						border-radius: 50%;
					}
				}
				.timeTxt{
					margin-left:20rpx;
					.timeTxtT{
						display: block;
						font-weight: 900;
						font-size: 32rpx;
						padding-top: 20rpx;
						color: #333333;
					}
					.timeB{
						display: inline-block;
						color: #999999;
					}
				}
			}
			.address{
				margin-top: 30rpx;
				// height:200rpx;
				.addressBox{
					height:50rpx;
					padding: 0 20rpx;
					line-height:50rpx;
					color: #666666;
					font-size: 28rpx;
					.addressBoxL{
						letter-spacing: 3rpx;
					}
					.addressBoxR{
						margin-left: 10rpx;
						position: relative;
						.addressImg{
							width: 36rpx;
							height: 36rpx;
							line-height: 50rpx;
							margin-left: 30rpx;
							position: absolute;
							top: 0px;
							right: -60rpx;
						}
					}
				}
			}
			.main{
				// height: 120rpx;
				margin-top: 10px;
				.main_txt{
					display: block;
					padding: 38rpx 20rpx;
					// height: 120rpx;
					font-weight: 900;
				}
			}
			.pendingMain_img{
				display: flex;
				margin-top: 10px;
				.Main_img{
					flex: 1;
					height: 200rpx;
					padding: 0 20rpx;
					.Main_imgI{
						width:100%;
						height: 100%;
						border-radius: 15rpx;
					}
				}
			}
			.addition{
				height:300rpx;
				background-color: #fff;
				margin-top: 30rpx;
				.additionBox{
					height: 100rpx;
					line-height: 100rpx;
					padding: 0 40rpx;
					border-bottom: 1px solid #EEEEEE;
					font-weight: 900;
					.item{
						color: #007AFF		
					}
				}
				.additionBox_list{
					float: right;
					display: block;
					color: #ccc;
					font-weight: 300;
					font-size: 40rpx;
				}
				.additionBox_r{
					float: right;
					display: block;
					color: #333;
					font-weight: 300;
					.list{
						color: #ccc;	
					}
				}
				
			}
			.complete{
				padding: 0 20rpx;
				display: flex;
				text-align: center;
				font-size: 26rpx;
				.complete_chu{
					// width: 180rpx;
					// height: 60rpx;
					background-color: rgba(249,168,50,0.2);
					margin: 30rpx 10rpx;
					line-height: 60rpx;
					border-radius: 54rpx;
					position: relative;
					.complete_chuImg{
						width: 30rpx;
						height: 30rpx;
						position: absolute;
						top: 16rpx;
						left: 30rpx;
					}
					.complete_chuTxt{
						margin-left: 35rpx;
					}
				}
			.complete_yi{
				width: 180rpx;
				height: 80rpx;
				background-color: rgba(70,211,69,0.2);
				margin: 30rpx 10rpx;
				line-height: 80rpx;
				border-radius: 54rpx;
				position: relative;
				.complete_chuImg{
					width: 30rpx;
					height: 30rpx;
					position: absolute;
					top: 16rpx;
					left: 30rpx;
				}
					.complete_chuTxt{
						margin-left: 35rpx;
					}
				}
				.complete_dian{
					margin-left:160rpx;
					line-height: 140rpx;
					color: #999;
					letter-spacing: 3rpx;
				}
			}
		}
		
	}
	.list-img {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
	}
	.named {
		display: flex;
		font-size: 30rpx;
		color: #333333;
		line-height: 40rpx;
	}
	.title {
		font-size: 26rpx;
		color: #FFFFFF;
		width: 400rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		margin-top: 10px;
	}
	.follow{
		width: 53px;
		height: 19px;
		line-height: 19px;
		text-align: center;
		color: #F9A832;
		background: #ffffff;
		border-radius: 16px;
		font-size: 11px;
		border: 1px solid #ffffff;
		float: right;
	}
	.clap_box{
		width: 89%;
		margin: 0 auto;
	}
	.clap_box_img{
		width: 100%;
		margin-top: 24px;
	}
	.guar-text textarea {
		border-radius: 8px;
		// width: 345px;
		height: 120px;
		background: #F2F3F5;
		padding: 16rpx 20rpx !important;
		box-sizing: border-box;
	}
	.clap_box_imgtow{
		position: absolute;
		top: 102px;
		right: 175px;
		width: 50px;
	}
	.tab_nav{
		display: flex;
		justify-content: center;
		align-items: center;
		// color: #447A05;
	}
	.tab_nav  .navTitle {
		height: 90rpx;
		line-height: 90rpx;
		width: 100%;
		text-align: center;
		font-size: 32rpx;
		font-family: Alibaba PuHuiTi;
		color: #333;
	}
	.active {
		position: relative;
		color: #447A05 ;
	}
	.active::after {
		content: "";
		position: absolute;
		width: 100rpx;
		height: 4rpx;
		background-color:#447A05 ;
		left: 0px;
		right: 0px;
		bottom: 0px;
		margin: auto;
	}
	.button{
		width: 30%;
		border-radius: 33px;
		line-height: 26px;
		border: 1px solid #CCCCCC;
		font-size: 14px;
	}
	.button1{
		width: 22%;
		border-radius: 33px;
		line-height: 26px;
		border: 1px solid #CCCCCC;
		font-size: 14px;
	}
	.button:hover{
		border: 1px solid #F9A832;
		color: #FFFFFF;
		background-color: #F9A832;
	}
	.header-li {
		display: flex;
		// align-items: center;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		line-height: 102rpx;
		color: #333333;
		border-bottom: 1rpx solid #EEEEEE;
	}
	
	.header-name {
		width: 186rpx;
	}
	.form-select {
		width: 480rpx;
		background: url(../../static/image/right.png) no-repeat center right;
		background-size: 10rpx 17rpx;
	}
	.yilingqu {
		width: 80%;
		height: 84rpx;
		// background: #F9A832;
		border-radius: 44rpx;
		line-height: 84rpx;
		color: #FFFFFF;
		text-align: center;
		font-size: 32rpx;
		background: linear-gradient(180deg, #76D904 0%, #417505 100%);
	}
	.list-img {
		width: 100rpx;
		height: 100rpx;
		// border-radius: 50%;
	}
	.named {
		display: flex;
		font-size: 30rpx;
		color: #333333;
		line-height: 40rpx;
	}
	.title {
		font-size: 26rpx;
		color: #999999;
		width: 400rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		margin-top: 10px;
	}
	.button_btn{
		width: 29%;
		border-radius: 33px;
		line-height: 26px;
		border: 1px solid #CCCCCC;
		font-size: 14px;
		margin-left: 2px;
	}
	.follow{
		width: 106rpx;
		height: 25px;
		line-height: 25px;
		text-align: center;
		color: #FFFFFF;
		background: #63B604;
		border-radius: 32rpx;
		// margin-left: 310rpx;
		font-size: 22rpx;
	}
	.complete{
		padding: 0 20rpx;
		display: flex;
		text-align: center;
		font-size: 26rpx;
	}
	.complete_chu{
		// width: 180rpx;
		height: 60rpx;
		background-color: rgba(249,168,50,0.2);
		    // background-color: rgba(69, 124, 5, 0.1);
		// margin: 30rpx 10rpx;
		line-height: 60rpx;
		border-radius: 54rpx;
		position: relative;
	}
	.complete_chu1{
		// width: 180rpx;
		height: 60rpx;
		// background-color: rgba(249,168,50,0.2);
		    background-color: rgba(69, 124, 5, 0.1);
		margin: 30rpx 10rpx;
		line-height: 60rpx;
		border-radius: 54rpx;
		position: relative;
	}
	.complete_chuImg{
		width: 30rpx;
		height: 30rpx;
		margin-top: 8px
		// position: absolute;
		// top: 7px;
		// left: 30rpx;
	}
	.complete_chuTxt{
		margin-left: 35rpx;
	}
	.complete_yi{
		width: 180rpx;
		height: 80rpx;
		background-color: #33F9A832;
		margin: 30rpx 10rpx;
		line-height: 80rpx;
		border-radius: 54rpx;
		position: relative;
	}
	.complete_chuImg{
		width: 30rpx;
		height: 30rpx;
		// position: absolute;
		// top: 25rpx;
		// left: 30rpx;
		margin-top: 8px;
	}
	.complete_chuTxt{
		margin-left: 6px;
	}
	.complete_dian{
		margin-left:160rpx;
		line-height: 140rpx;
		color: #999;
		letter-spacing: 3rpx;
	}
</style>
